<template>
    <div class="my-wrap">
        <div class="hd-status-user" @click="linkTo({ name: 'HomePerson' })">
            <div class="hd-user-face">
                <img
                    src="https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eoAzicgLz7U4ZVA6iahx7wqUoI6Z6WSPh1Z7D9V8GDGLUGiaQjJXMxQIccSne9ibDXhK8YhU2PPAOicdAA/132"
                    alt=""
                />
            </div>
            <div class="hd-user-info">
                <div class="user-name">恩格拉</div>
                <div class="user-desc">他太懒了，还没留下签名</div>
            </div>
        </div>
        <bottom-menu></bottom-menu>
    </div>
</template>

<script>
import BottomMenu from 'components/bottom-menu/bottom-menu';
export default {
    name: 'DuoduocaiH5My',
    components: { BottomMenu },
    data() {
        return {};
    },

    mounted() {},

    methods: {
        /**
         * @desc 路由跳转
         * @param {String} location des
         */
        linkTo(location) {
            this.$router.push(location);
        },
    },
};
</script>

<style lang="scss" scoped>
.my-wrap {
    width: 100%;
    height: 100%;
    padding-bottom: 50px;
    .hd-status-user {
        padding: 30px 24px 0px;
        display: flex;
        align-items: center;
        .hd-user-face {
            flex-shrink: 0;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            margin-right: 20px;
            overflow: hidden;
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
        .hd-user-info {
            text-align: left;
            flex: 1;
            .user-name {
                max-width: 200px;
                word-break: keep-all;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-size: 20px;
                color: #333333;
            }
            .user-desc {
                color: #666666;
                font-size: 13px;
                margin-top: 5px;
                line-height: 1.5;
                word-break: break-all;
                word-wrap: break-word;
            }
        }
    }
}
</style>
